<template>
    <div class="home">
      <div class="home_img"></div>
        <header>
                 <div class="logo clear fl">
            <img src="../assets/images/logo.png" alt="">
            <a href="#"> 苏州礼成文化传媒</a>
        </div>
        </header>
        <nav>
          <ul class="list">
                        <li @click="about">
                            <div class="li_top">关于我们</div>
                            <div class="li_bom">About</div>
                        </li>
                        <li @click="site">
                            <div class="li_top">现场布置</div>
                            <div class="li_bom">Wedding</div>
                        </li>
                        <li @click="house">
                            <div class="li_top">婚宴酒店</div>
                            <div class="li_bom">Hotel</div>
                        </li>
                        <li @click="wedding">
                            <div class="li_top">婚礼服务</div>
                            <div class="li_bom">Service</div>
                        </li>
                           <li @click="car">
                            <div class="li_top">婚车租赁</div>
                            <div class="li_bom">Car</div>
                        </li>
                           <li @click="select">
                            <div class="li_top">精挑细选</div>
                            <div class="li_bom">Colled</div>
                        </li>
                    </ul>
        </nav>
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    about() {
      this.$router.push({ path: "/about" });
    },
    site() {
      this.$router.push({ path: "/site" });
    },
    house() {
      this.$router.push({ path: "/house" });
    },
    wedding() {
      this.$router.push({ path: "/wedding" });
    },
    car() {
      this.$router.push({ path: "/car" });
    },
    select() {
      this.$router.push({ path: "/select" });
    }
  }
};
</script>
<style>
.home {
  position: relative;
  min-height: 100%;
 
 
  width: 100%;
  height: 100%;
  margin: 0 auto;
   
}
.home_img{
    width: 100%;
  height: 100%;
  margin: 0 auto;
position: absolute;
 background: url("../assets/images/floor.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
   background-repeat: no-repeat;
  background-size: 100% 100%;
  filter:blur(30px)
}

header {
  width: 100%;
  height: 135px;
  line-height: 135px;
  position: relative;
}

header .logo {
  width: 280px;
  height: 60px;
  float: left;
  display: flex;
  flex-direction: row;
  margin-left: 35px;
  position: absolute;
  top: 25%;
  left: 0;
}

header .logo img {
  width: 60px;
  height: 60px;
}

header .logo a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  padding-left: 12px;
  line-height: 60px;
}
nav {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #a0abb8;
}
nav .list {
  width: 550px;
  height: 50px;

  display: flex;
  margin: 0 auto;
}

nav li {
  flex: 1;
  height: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
nav li:hover {
  color: #e5e4ea;
  transform: scale(1);
  transition: all 0.3s;
  border-bottom: 2px solid #e5e4ea;
  opacity: 1;
}

/* nav li:hover::after {
  content: "";
  display: block;
  width: 15px;

  margin: 0 auto;
} */
nav li::after {
  content: " ";
  position: absolute;
  border-left: 1px #a0abb8 solid;
  top: 25%;
  right: 0;
  height: 50%;
  margin-top: auto;
  margin-bottom: auto;
}
nav li:last-child::after {
  border: 0;
}
nav li .li_top {
  font-size: 16px;
  color: #7c8085;
}

nav li .li_bom {
  font-size: 8px;
  color: #a0abb8;
}
</style>

